<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JSs手风琴</title>
    <!--<link rel="stylesheet" href="../../css/bootstrap.css">-->
    <!--<script src="../../js/jquery-1.11.2.min.js"></script>-->
   <!-- <script src="../../js/bootstrap.min.js"></script>-->
    <style>
        body {
            padding: 50px;
        }
    </style>
    <script>
        $(function () {
            $("#part1,#part2,#part3,#part4").collapse({
                parent:"#parent",
                toggle:true  /*展开和隐藏*/
            })
        })
    </script>
</head>
<body>
<div class="panel-group" id="parent">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a href="#part1" data-toggle="collapse" >点击展示，再次点击折叠</a>
            </h4>
        </div>
        <div id="part1" class="panel-collapse  in"><!--in显示  collapse 隐藏-->
            <div class="panel-body" >
                第一部分内容
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a href="#part2" data-toggle="collapse" >点击展示，再次点击折叠</a>
            </h4>
        </div>
        <div id="part2" class="panel-collapse   collapse">
            <div class="panel-body" >
                第二部分内容
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a href="#part3" data-toggle="collapse" >点击展示，再次点击折叠</a>
            </h4>
        </div>
        <div id="part3" class="panel-collapse  collapse">
            <div class="panel-body" >
                第三部分内容
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title" >
                <a href="#part4" data-toggle="collapse" >点击展示，再次点击折叠</a>
            </h4>
        </div>
        <div id="part4" class="panel-collapse  collapse">
            <div class="panel-body">
                第四部分内容
            </div>
        </div>
    </div>
</div>
</body>
</html>
